/* 清理浮动 */
.fn-clear:after {visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.fn-clear {zoom:1; /* for IE6 IE7 */}
/* 隐藏, 通常用来与 JS 配合 */
body .fn-hide {display:none;}
/* 设置内联, 减少浮动带来的bug */
.fn-left,.fn-right {display:inline;}
.fn-left {float:left;}
.fn-right {float:right;}
/*webkit内核浏览器滚动条*/
::-webkit-scrollbar-track-piece{background:#e9e9e9;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-button{display:none;}
::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece{background:-webkit-gradient(linear,left);}
::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:horizontal{border-radius:6px;background:#bdbdbd;}
::-webkit-scrollbar-thumb:hover{background:#8e8e8e;}
::-webkit-scrollbar-thumb:active{background:#828181;}
@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?68245288');
  src: url('../font/fontello.eot?68245288#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?68245288') format('woff'),
       url('../font/fontello.ttf?68245288') format('truetype'),
       url('../font/fontello.svg?68245288#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*common*/
.fontico:before{
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
}
i.down:before{ content:'\e800';}
i.lock:before{ content:'\e806';}
i.logout:before{ content:'\e804';}

/*chatbox*/
.chatbox{ min-width:960px;margin:2rem auto;overflow:hidden; height:100%; width:60%; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; background-color:rgba(255,255,255,1);}

/*chat_top*/
.chat_top{ height:60px; border-bottom:1px solid #eee;}
.logo{ text-align: center;
    line-height: 58px;
}
.logo img{ vertical-align:bottom;}
.uinfo{ margin:10px 0; float:right; padding-right:20px;}
.uface{ float:left; height: 40px;display: flex;flex-direction: column;}
.uface_oneSelf{ float:right; display: flex;flex-direction: column;}
.uface_oneSelf > span,.uface > span{
    font-size: 1rem;
    color: #7E90A5;
    margin-bottom: .56rem;
}
.uface img{ -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.uface_oneSelf img{ -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.uinfo .uname{ float:left; line-height:40px; margin-left:10px; color:#2E4059; position:relative;}
.uinfo .uname i.down{ margin-left:50px;}
.managerbox{ display:none; width:100px; border:1px solid #eee; background-color:#FFF; padding:10px 0; position:absolute; top:40px; right:-10px;}
.managerbox a{ display:block; color:#2E4059; padding:0px 10px;}
.managerbox a i{ margin-right:10px;}
.managerbox a:hover{ background-color:#f9f9f9; text-decoration:none;}

/*chat_message*/
.chat_message{ height:-moz-calc(100% - 61px); height:-webkit-calc(100% - 61px); height:calc(100% - 61px);padding: 20px;}

/*chat_left*/
.chat_left{width:-moz-calc(100% - 240px); width:-webkit-calc(100% - 240px); width:calc(100% - 240px); height:-moz-calc(100% - 40px); height:-webkit-calc(100% - 40px); height:calc(100% - 40px); float:left;}
.message_box{
    min-height: 37rem;
    max-height: 37rem;
    background-color:#FFF; margin-bottom:20px; height:-moz-calc(100% - 120px); height:-webkit-calc(100% - 120px); height:calc(100% - 120px); overflow:auto;}
.msg_item,.msg_item_oneSelf{ margin-bottom:20px; position:relative;margin-right: .8rem}
.msg_item .uface{ position:absolute; margin-top: .5rem}
.msg_item_oneSelf .uface_oneSelf{ margin-top: .5rem}
.msg_item .item_right{ margin-left:45px; float:left; margin-right:15px;}
.msg_item_oneSelf .item_oneSelf{ margin-left:45px; float:right;}
.msg_item .msg{
    display:inline-block;
    *display:inline;
    *zoom:1;
    float:left;
    word-break: break-all;
    word-wrap: break-word;
    max-width: 25rem;
    font-size: 1.5rem;
    background-color:#F4F6F8; padding:5px 10px; line-height:24px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#2E4059; position: relative;}
.msg_item_oneSelf .msg_oneSelf{
    display:inline-block;
    *display:inline;
    *zoom:1;
    float:right;
    max-width: 25rem;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 1.5rem;
    background-color:#F4F6F8; padding:5px 10px; line-height:24px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; color:#2E4059; position: relative;}
.msg.own{ background-color:#E0F1FC;}/*自己的聊天记录显示为蓝色*/
.msg_oneSelf.own_oneSelf{ background-color:#E0F1FC;}/*自己的聊天记录显示为蓝色*/
/*.msg_item .msg:before {*/
/*content: "";*/
/*position: absolute;*/
/*bottom: -12px;*/
/*left: 10px;*/
/*border-width: 12px 12px 0 0 ;*/
/*border-style: solid;*/
/*border-color: #F4F6F8 transparent;*/
/*display: block;*/
/*width: 0;*/
/*}*/
.msg_item .msg.own:before{ border-color:#E0F1FC transparent;}
.msg_item_oneSelf .msg_oneSelf.own_oneSelf:before{ border-color:#E0F1FC transparent;}
.msg_item .name_time{ font-size:12px; color:#7E90A5; line-height:30px; padding-left:10px;text-align: left}
.msg_item_oneSelf .name_time_oneSelf{
    margin-right: 15px;
    font-size:12px; color:#7E90A5; line-height:30px; padding-left:10px;text-align: right}

.write_box{overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; overflow:hidden;}
.write_area{border:2px solid #E3E8ED; resize : none;border-bottom:none;padding:5px 5px 0 5px; outline:none; color:#B4C0CE; margin:0; vertical-align:bottom; width:-moz-calc(100% - 14px); width:-webkit-calc(100% - 14px); width:calc(100% - 14px);
    min-height:4rem;
    max-height: 5rem;
}
.btn_submit{
    border:2px solid #E3E8ED;border-top:none;padding:5px; outline:none; color:#B4C0CE; margin:0;
    vertical-align:bottom; width:-moz-calc(100% - 14px); width:-webkit-calc(100% - 14px); width:calc(100% - 14px);
    min-height:4rem;
    max-height: 4rem;
}
.facebox{ height:32px; width:100%; background-color:#E3E8ED;}
.sub_but{ float:right; padding:0 25px; background-color:#7E90A5; outline:none; border:none; height:32px; cursor:pointer; line-height:30px; color:#FFF;}
.sub_but{
    border-radius: 10px;
}
/*chat_right*/
.chat_right{ width:199px; height:100%; float:left; border-left:1px solid #eee;}
.user_list{ padding:0; overflow:auto; height:100%;}
.user_list li{ padding:10px 20px; color:#2E4059; cursor:pointer;}
.user_list li:hover,.user_list li.selected{ background-color:#F4F6F8;}
.user_list li span{ display:block; float:left; width:30px; height:30px; margin-right:10px;}
.user_list li em{ display:block; float:left; height:30px; line-height:30px;}
.user_list li small{ width:10px; height:10px; margin:10px; float:left; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
small.online{ background-color:#57B869;}
small.offline{ background-color:#EB3E3E;}
.user_list li img{ -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; vertical-align:middle;}


/*expression - 表情,有待增加*/
.expression{ float:left;}

/*chat_type - 聊天性质,私聊|群聊*/
.chat_type{ float:left; line-height:30px; padding-left:10px;}
.only_left{
    width: 100%;
}
.msg_triangle{
    width: 0px;
    height: 0px;
    float:right;
    margin-top: .9rem;
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent #e0f1fc;
}
.msg_triangle_1{
    width: 0px;
    height: 0px;
    float: left;
    margin-top: .85rem;
    margin-left: -.7rem;
    border-width: 6px;
    border-style: solid;
    border-color:transparent #e0f1fc transparent transparent;
}